<template>
  <div>
    <van-nav-bar :title="t('home.arriveScanning')" left-arrow @click-left="onClickLeft" placeholder fixed/>

    <van-cell-group style="background: none">
      <scanning @keydownEnter="handleScan" ref="orderNoRef" :placeholder="t('arriveScanning.pleaseScanning')" :isFocus="true" :isReset="true"></scanning>

      <van-form @submit="onSubmit">
        <van-field v-model="form.orderNo" disabled :label="t('arriveScanning.warehouseEntryNumber')" class="mt-2"/>
        <van-field v-model="form.preBoxNum" type="number" disabled :label="t('arriveScanning.forecastBoxCount')"/>
        <van-field v-model="form.deliveredBoxNum" type="number" disabled :label="t('arriveScanning.receivedBoxes')"/>
        <van-field v-model="form.undeliveredBoxNum" type="number" disabled
                   :label="t('arriveScanning.numberOfBoxesNotReceived')"/>
        <van-field v-model="form.arrivalBoxNum" type="number" :label="t('arriveScanning.arrivalBoxNum')"
                   :rules="[{ required: true, message: t('input') }]"/>
        <div style="margin: 2vw">
          <van-button block type="primary" native-type="submit" :loading="submitLoading">{{ t('submit') }}</van-button>
        </div>
      </van-form>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Scanning from "@/views/components/Scanning/index.vue";
import { postRequest, scanSuccess, scanFail } from "@/api";
import { showConfirmDialog, showFailToast, showSuccessToast } from "vant";

const { t } = useI18n();
const onClickLeft = () => history.back();
const submitLoading = ref(false);
const orderNoRef = ref(null)
const form = ref();
const resetForm = () => {
  form.value = {
    orderNo: undefined,
    preBoxNum: undefined,
    deliveredBoxNum: undefined,
    undeliveredBoxNum: undefined,
    arrivalBoxNum: undefined,
  }
}
resetForm();
const handleScan = orderNo => {
  resetForm();
  postRequest(
      '/orderInfo/getOrderInfoForArrivalScan',
      { orderNo }
  ).then(res => {
    scanSuccess()
    if (!res || res.returnCode !== 10000 || !res.data) return
    form.value = {
      ...res.data
    }
  }).catch(() => {
    scanFail()
    console.log(1111);
  })  
}
const onSubmit = async () => {
  const {
    orderNo,
    preBoxNum,
    deliveredBoxNum,
    undeliveredBoxNum,
    arrivalBoxNum
  } = form.value
  if (Number(arrivalBoxNum) <= 0 || arrivalBoxNum === '-' || arrivalBoxNum === '.') {
    showFailToast(t('arriveScanning.arrivalBoxNumMsg'))
    return
  }
  //已收=0 代表第一次
  if (Number(deliveredBoxNum) === 0) {
    if (Number(preBoxNum) !== Number(arrivalBoxNum)) {
      const flag = await showConfirmDialog({
        title: t('tip'),
        message: t('arriveScanning.preBoxNumMsg')
      })
      if (flag !== 'confirm') return
    }
  }
  //已收>0 代表再次
  else if (Number(deliveredBoxNum) > 0) {
    if (Number(undeliveredBoxNum) !== Number(arrivalBoxNum)) {
      const flag = await showConfirmDialog({
        title: t('tip'),
        message: t('arriveScanning.undeliveredBoxNumMsg')
      })
      if (flag !== 'confirm') return
    }
  }
  //负数代表出错
  else {
    showFailToast(t('dataError'))
    return
  }
  submitLoading.value = true
  const res = await postRequest(
      '/orderInfo/updateOrderInfoForArrival',
      { orderNo, arrivalBoxNum, fromTerminal: 1 }
  ).finally(() => {
    submitLoading.value = false
  })
  if (!res || res.returnCode !== 10000) return
  showSuccessToast(t('success'))
  orderNoRef.value.setFocus()
  resetForm()
}
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-button) {
  font-size: 1rem;
}

:deep(.van-field--disabled .van-field__label) {
  color: black;
}
</style>